<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>江宁义务网上商城 - 网购首选 - 正品低价、品质保障、货到付款、配送及时、放心服务、轻松购物！</title>
<meta name="description" content="义务商城-专业的综合网上购物商城，在线销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品、在线旅游等数万个品牌千万种优质商品。便捷、诚信的服务，为您提供愉悦的网上商城购物体验! ">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东商城">
<jsp:include page="../common/include.jsp"></jsp:include>
<!-- mobile setting -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<SCRIPT src="<c:url value="/scripts/jquery-1.2.6.pack.js"/> " type=text/javascript></SCRIPT>
<SCRIPT src="<c:url value="/scripts/base.js"/> " type=text/javascript></SCRIPT>
</head>
<script>
function mession(obj){
	//$(obj).addClass("inputTxtClass-focus");
	$(obj).parent().parent().find("div.first").css("display","block");
	$(obj).parent().parent().find("div.second").css("display","none");
	$(obj).parent().parent().find("div.thread").css("display","none");
}

function validVal(obj){
	//$(obj).removeClass("inputTxtClass-focus");
	$(obj).parent().parent().find("div.first").css("display","none");
	var val = jQuery.trim($(obj).val());
	if($(obj).attr("name")=="username"){
    	var regu = "^[0-9a-zA-Z\\_]{2,20}$";
    	var regu1 = "^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$";
    	var regu2 = "^[0-9]{11}$";
    	var re = new RegExp(regu);
    	var re1 = new RegExp(regu1);
    	var re2 = new RegExp(regu2);
    	if(val == ""){
    		//$(obj).addClass("inputTxtClass-error");
    		$(obj).parent().parent().find("div[class='second'] span").text("请输入用户名");
            $(obj).parent().parent().find("div[class='second']").css("display","block");
            return false;
    	}
    	if(re.test(val) || re1.test(val) || re2.test(val)){
    		return true;
    	}else{
    		//$(obj).addClass("inputTxtClass-error");
    		$(obj).parent().parent().find("div[class='second'] span").text("用户名格式错误");
            $(obj).parent().parent().find("div[class='second']").css("display","block");
            return false;
    	}
	}else{
            var regu = "^[0-9a-zA-Z]{6,16}$";
            var re = new RegExp(regu);
            if(val == ""){
        		$(obj).parent().parent().find("div[class='second'] span").text("请输入密码");
                $(obj).parent().parent().find("div[class='second']").css("display","block");
                return false;
            }
            if(re.test(val)){
            	return true;
            }else{
        		$(obj).parent().parent().find("div[class='second'] span").text("密码格式错误");
                $(obj).parent().parent().find("div[class='second']").css("display","block");
                return false;
            }
	}
}

//登录
function login(){
	var obj1 = $("input[name='username']")[0];
	var obj2 = $("input[name='pwd']")[0];
	var bool1 = validVal(obj1);
	var bool2 = validVal(obj2);
	var username = jQuery.trim($("input[name='username']").val());
	var password = jQuery.trim($("input[name='pwd']").val());
	if(bool1 && bool2){
        $.ajax({
     		url : "<c:url value='/crtc/loginToSys'/>",
     		type : "post",
     		data:"username="+username+"&pwd="+password,
     		dataType:"json",
     		success : function(data) {
     			var bool = data.message;
     			if(bool=="ok"){
     				window.location.reload(true);
     			}else if(bool=="no"){
     				alert("用户名或密码错误，请重试");
     			}else{
     				alert("数据库持久化错误，请检查网络");
     			}
     		}
     	});
	}
}

//使弹出的操作层居中显示
function letDivCenter(divName){   
    var top = ($(window).height() - $(divName).height())/2;   
    var left = ($(window).width() - $(divName).width())/2;   
    var scrollTop = $(document).scrollTop();   
    var scrollLeft = $(document).scrollLeft(); 
    var screenWidth = document.body.offsetWidth;
    var screenHeight = document.body.offsetHeight;
    $("#bgDiv").css({display:'block','width':screenWidth,'height':screenHeight});
    $(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();  
}

	//隐藏弹出的div层
function hideTheDiv(flag){
	if(flag == 0){
		$(".addr_tab").css("display","none");
	}else if(flag == 1){
	}
	$("#bgDiv").css("display","none");
}

function showAddDiv(){
	letDivCenter(".addr_tab");
}
    function addToCart(){
    	document.getElementById("myform").action="<c:url value="/crtc/addToShoppingCart"/>";
    	document.getElementById("myform").submit();
    }
    function toapply(userflag,pcode,phyprice){
    	if(userflag==0){
    		showAddDiv();
    	}else{
        	document.getElementById("myform").action="<c:url value="/crtc/applynow"/>";  
        	document.getElementById("myform").submit();
    	}
    }
    //增加或者减少商品
    function addNum(val){
    	var numOfpro = parseInt($("#pnum").val());
    	if(val == -1 && numOfpro == 1){
    		alert("至少购买一件商品");
    	}else if(numOfpro > 999 && val == 1){
    		alert("购买数量应该在1-999之间");
    	}else{
    		var result = val + numOfpro;
    		$("#pnum").attr("value",result);
    	}
    }
    
    //及时验证输入的数量是否符合要求
    function validAccount(obj){
    	var regu = "^\\d+$";
    	var re = new RegExp(regu);
    	var pnum = obj.value;
    	if(pnum == ""){
    		alert("购买数量应该在1-999之间");
    		obj.value = "1";
    	}
    	if(!re.test(pnum)){
    		obj.value=obj.value.replace(/\D/g,'');
    		if(obj.value == ""){
    			obj.value = "1";
    		}
    	}else{
    		if(parseInt(pnum) == 0){
    			alert("至少购买一件商品");
    			obj.value = "1";
    		}
    		if(parseInt(pnum)>999){
    			alert("购买数量应该在1-999之间");
    			obj.value = pnum.substring(0,pnum.length-1);
    		}
    	}
    }
</script>
<body>
<div class="wrapper">
    <jsp:include page="../common/top.jsp"></jsp:include>
    <div class="section_container">
        <!--Mid Section Starts-->
        <section><div class="section">
        	<ul class="breadcrumb">
		      <li>&ouml; &nbsp;&nbsp;<a href="<c:url value="/wlc"/> ">首页</a></li>
		      <li><a href="<c:url value="/wlc/glstdl?dlcode=${p.pdlcode}"/> ">${p.dlname}</a></li>
		      <li class="active"><a href="<c:url value="/wlc?xlcode=${p.pxlcode}"/> "> ${p.xlname}</a></li>
		    </ul>
    <!--PRODUCT DETAIL STARTS-->
    <div id="product_detail"> 
      <!--Product Left Starts-->
      <div class="product_leftcol" id="spec-n1"> <img class="p_pic" src="<c:url value="${p.pphoto}"/> " /> <span class="pr_info">&nbsp;</span> 
       <div id="spec-list"> 
        <ul class="pr_gallery">
        	<c:forEach items="${pclist}" var="pc">
        		<li><img src="<c:url value="${pc.picurl}"/>" /></li>
        	</c:forEach>
        </ul>
        </div>
      </div>
      <!--Product Left Ends--> 
      <!--Product Right Starts-->
      <form name="myform" method="post" id="myform">
      <input type="hidden" name="pcodes" id="pcodes"/>
      <input type="hidden" name="sumprice" id="sumprice"/>
      <div class="product_rightcol"> <small class="pr_type">雕牌洗衣粉</small>
        <h1>${p.pname}</h1>
        <p class="short_dc">
        	${p.pjieshao}
        </p>
        
        <div class="pr_price"> 现 价 : <big>￥${p.phyprice}</big> 市场价 : <small>￥${p.pscprice}</small> </div>
        <div class="size_info">
          <div class="size_sel">
            <label>重 量 : 3kg</label> <label style="margin-left: 50px;">商品积分 : ${p.khjf}</label> 
          </div>
          <div class="color_sel">
            <label></label>
          </div>
        </div>
        <div class="qty_info">
          <div class="quantity">
            <label>数 量 : </label> <a href="javascript:void(0);" onclick="addNum(-1)"> &nbsp;-&nbsp; </a><input type="text" onkeyup="validAccount(this)" name="pnum" id="pnum" value="1"><a href="javascript:void(0);" onclick="addNum(1)">&nbsp;+&nbsp;</a> &nbsp;&nbsp;( 库存量：${p.psum} )
          </div>
        </div>
        <input type="hidden" name="pcode" value="${p.pcode}"/>
        <div class="add_to_buttons">
          <button onclick="toapply(${user==null?0:1})" class="add_cart nowbuy">现在购买  &gt;&gt;</button>
          <span>or</span>
          <button onclick="addToCart()" class="add_cart">加入购物车&nbsp;</button>
        </div>
        <div class="product_overview">
          <h4>快速描述：</h4>
          ${p.pqdesc}
        </div>
      </div>
      </form>
    <!--Product Right Ends--> 
  </div>
  <!--PRODUCT DETAIL ENDS--> 
<!--Product List Starts-->
           <div class="products_list products_slider">
                <h2 class="sub_title">相关商品</h2>
                <ul class="p_con_list">
                    <li> <a class="product_image"><img src="<c:url value="/images/pr_l_1.jpg"/> " /></a>
                        <div class="product_info">
                            <h3><a href="leisure_detail.html">GearMax三星i9500手机保护套S4驼鸟纹皮套 红色</a></h3>
                        </div>
                        <div class="price_info"> <span class="oldp">￥123.22</span>
                            <button class="price_add" title="" type="button"><span class="pr_price">￥76.00</span><span class="pr_add">加入购物车</span></button>
                        </div>
                    </li>
                    <li> <a class="product_image"><img src="<c:url value="/images/pr_l_2.jpg"/> " /></a>
                        <div class="product_info">
                            <h3><a href="leisure_detail.html">三星16G TF MicroSD/SDHC高速存储卡 升级版</a></h3>
						</div>
                        <div class="price_info"> <span class="oldp">￥123.22</span>
                            <button class="price_add" title="" type="button"><span class="pr_price">￥76.00</span><span class="pr_add">加入购物车</span></button>
                        </div>
                    </li>
                    <li> <a class="product_image"><img src="<c:url value="/images/pr_l_3.jpg"/> " /></a>
                        <div class="product_info">
                            <h3><a href="leisure_detail.html">金士顿 16GB class10 SD存储卡店庆风暴！C10高三星、小米等手机）店庆风暴！历史超低价！端午回家带个充</a></h3>
                        </div>
                        <div class="price_info"> <span class="oldp">￥123.22</span>
                            <button class="price_add" title="" type="button"><span class="pr_price">￥76.00</span><span class="pr_add">加入购物车</span></button>
                        </div>
                    </li>
                    <li> <a class="product_image"><img src="<c:url value="/images/pr_l_5.jpg"/> " /></a>
                        <div class="product_info">
                            <h3><a href="leisure_detail.html">CN Clogs Beach/Garden Clog</a></h3>
                        </div>
                        <div class="price_info"> <span class="oldp">￥123.22</span>
                            <button class="price_add" title="" type="button"><span class="pr_price">￥76.00</span><span class="pr_add">加入购物车</span></button>
                        </div>
                    </li>
                    <li> <a class="product_image"><img src="<c:url value="/images/pr_l_2.jpg"/> " /></a>
                        <div class="product_info">
                            <h3><a href="leisure_detail.html">CN Clogs Beach/Garden Clog</a></h3>
                        </div>
                        <div class="price_info"> <span class="oldp">￥123.22</span>
                            <button class="price_add" title="" type="button"><span class="pr_price">$76.00</span><span class="pr_add">加入购物车</span></button>
                        </div>
                    </li>
                </ul>
            </div> 
            <!--Product List Ends-->
            <hr class="detail_hr">
            <div class="pro_detail">
				<div class="detail_title">
					 <div id="detail_tab5" ><a href="javascript:void(0)">商品介绍</a></div>								      
					<!--onclick="ChangeVideoInfoBox3(id)">  <div id="detail_tab6" onclick="ChangeVideoInfoBox3(id)"><a href="javascript:void(0)">商品评价（239）</a></div> -->
				 </div>
				 <div class="detail_cont" id="detail_tab5_content">
				 	<img src="<c:url value="${p.pdesc}"/> ">
				 </div>
				<%--  <div class="detail_cont" id="detail_tab6_content" style="display:none">
				 <ul>
				 	<c:forEach items="${pps}" var="pp">
				 		<li>${pp.pname} , ${pp.dpname}</li>
				 	</c:forEach>
				 </ul>
				 </div> --%>
            </div>
        </div></section>
        <!--Mid Section Ends-->
    </div>
    <div class="footer_container">
        <!--Footer Starts-->
 		   <jsp:include page="../common/footer.jsp"></jsp:include>
        <!--Footer Ends-->
    </div>
</div>

<!-- 弹出层 登录 -->
        <div class="addr_tab">
            <div class="closeDivClass" onclick="hideTheDiv(0)"></div>   
   			<table>
   						<tr>
							<td><br>邮箱 / 用户名 / 手机号：</td>
							<td></td>
						</tr>
						<tr>
							<td><input type="text" class="inputTxtClass" value="" name="username" onfocus="mession(this)" onblur="validVal(this)"></td>
							<td>
					  	        <div class="second"><span class="red"></span></div>
							</td>
						</tr>
						<tr>
							<td class="btn_subm_td">登录密码：</td>
							<td></td>
						</tr>
						<tr>
							<td><input type="password"  class="inputTxtClass" value="" name="pwd" onfocus="mession(this)" onblur="validVal(this)"></td>
							<td>
					  	        <div class="second"><span class="red"></span></div>
	                        </td>
						</tr>
						<tr>
							<td class="btn_subm_td"><br><input type="submit" onclick="login();" value="登  录"></td>
							<td></td>
						</tr>
						<tr>
							<td><br>&nbsp;</td>
							<td class="fg_pwd_td"><br><a href="#">忘记密码？</a></td>
						</tr>
	        </table>
        </div>
        <div id="bgDiv" class="bgDiv"></div>
<!--CUSTOMIZE-->
<style type="text/css">
.page_selector{ position:absolute; right:0px; top:28%;}
.page_selector a.page_open{ display:inline-block; width:60px; height:12px; background:#252525; color:#fff; text-align:center; font-size:14px; padding:20px 0px; font-weight:bold; text-decoration:none; float:left;}
.page_selector ul{ float:left; background:#f0f0f0; padding:10px 0px; border-top:solid 2px #000; border-bottom:solid 2px #000; display:none;}
.page_selector ul li{ padding:8px 10px; }
.page_selector ul li a{ font-weight:bold; text-decoration:none; color:#000; display:block; padding:2px 5px; text-transform:uppercase; font-size:11px;}

.store_selector{ position:absolute; left:0px; top:28%;}
.store_selector .store_open{display:inline-block; width:128px; height:55px;}
.store_selector div{ float:left; width:157px; height:226px; display:none;}

div.addr_tab{    position:absolute; background:white; z-index:10001; width: 400px;border:5px solid #dedede;padding: 10px 0 10px 80px;display:none}
div.addr_tab table tr td{height: 25px;line-height: 25px; border-width:0; padding:3px 0;font-size: 14px;}
div.addr_tab table tr td input[type="text"]{width: 250px;height: 30px;line-height: 30px;padding-left: 10px;border: 1px solid #ccc;}
div.addr_tab table tr td input[type="password"]{width: 250px;height: 30px;line-height: 30px;padding-left: 10px;border: 1px solid #ccc;}
div.addr_tab table tr td input[type="submit"]{color:#fff; font-size:14px; font-weight:bold; padding:8px 0;width: 262px; background:#EF5A1F; border:0px; line-height:100%; cursor:pointer;height: 35px;}
div.addr_tab table tr td input[type="submit"]:HOVER {background-color: #f38256;}
div.closeDivClass{    cursor:pointer;float:right;margin-right:12px;
    width:22px;height:22px;background-position:-97px -195px;background-image: url("<c:url value='/images/icon.png '/>");
}
.bgDiv{display:none;  position:absolute;  top:0;  background-color:#777;  filter:Alpha(opacity=30);  opacity:0.6;
   left:0;  width:100%;  height:100%;  z-index:10000;}
.second{display:none;border:#e5c3c4 1px solid;    padding:0 5px 0 5px;line-height:30px;background:#ffeaea;white-space:nowrap;
    height:30px; border-radius:3px;font-size:12px;}
.red{color:#c00;}
</style>

<script type="text/javascript">
$(document).ready(function(){
	//SLIDE TOGGLE
	jQuery(".page_open").toggle(function() {
		 $('.page_selector ul').slideDown(300);	
		 }, function(){
		 $('.page_selector ul').slideUp(300);		 
	});	
	//SLIDE TOGGLE
	jQuery(".store_open").toggle(function() {
		 $('.store_selector div').slideDown(300);	
		 }, function(){
		 $('.store_selector div').slideUp(300);		 
	});		
});

</script>

<div class="page_selector">
<a href="#" class="page_open">PAGES</a>
<ul>
	<li> <a href="leisure_index.html">HOME</a></li>
    <li> <a href="leisure_listing.html">Product Listing</a></li>
    <li> <a href="leisure_detail.html">Product Detail</a></li>
    <li> <a href="leisure_cart.html">Shopping Cart</a></li>
    <li> <a href="leisure_checkout.html">Checkout</a></li>
    <li> <a href="leisure_contact.php">Contact</a></li>
</ul>
</div>

<SCRIPT type=text/javascript>
	$(function(){			
	   $(".jqzoom").jqueryzoom({
			xzoom:400,
			yzoom:400,
			offset:10,
			position:"right",
			preload:1,
			lens:1
		});
		$("#spec-list").jdMarquee({
			deriction:"left",
			width:350,
			height:56,
			step:2,
			speed:4,
			delay:10,
			control:true,
			_front:"#spec-right",
			_back:"#spec-left"
		});
		$("#spec-list img").bind("mouseover",function(){
			var src=$(this).attr("src");
			$("#spec-n1 img").eq(0).attr({
				src:src.replace("\/n5\/","\/n1\/"),
				jqimg:src.replace("\/n5\/","\/n0\/")
			});
			$(this).css({
				"border":"1px solid #ff6600",
				"padding":"1px"
			});
		}).bind("mouseout",function(){
			$(this).css({
				"border":"1px solid #ccc",
				"padding":"1px"
			});
		});				
	});
	</SCRIPT>

<SCRIPT src="<c:url value="/scripts/lib.js"/>" type=text/javascript></SCRIPT>
<SCRIPT src="<c:url value="/scripts/163css.js"/> " type=text/javascript></SCRIPT>
</body>
</html>